<!-- 3D环形图图结合chart.js -->
<!-- 网络设备归属泄露风险分布统计图 -->
<template>
  <div class="chart-container">
    <div
      ref="chart"
      class="chart"
      style="width: 100%; height: 300px; position: absolute; top: 50px"
    />
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
import { getPie3D, getParametricEquation } from "../chart.js"; //工具类js
import { riskDataStatistics } from "@/api/networkEquipment/equipment";
const color = ["#4ba2e9", "#e9bd4b", "#3febcc"];
export default {
  name: "Chart",
  data() {
    return {
      optionData: [
        {
          name: "风险距离<10KM",
          value: 0,
        },
        {
          name: "10KM<=风险距离<30KM",
          value: 0,
        },
        {
          name: "风险距离>30KM",
          value: 0,
        },
      ],
      statusChart: null,
      option: {},
    };
  },
  created() {
    this.setLabel();
  },

  mounted() {
    let that = this;
    riskDataStatistics().then((res) => {
      this.optionData[0].value = res.data.lowRiskCount;
      this.optionData[1].value = res.data.mediumRiskCount;
      this.optionData[2].value = res.data.highRiskCount;
      setTimeout(function () {
        that.initChart5();
      }, 0);
    });
  },
  methods: {
    setLabel() {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index],
        };

        item.label = {
          normal: {
            show: false,
            color: color[index],
            position: "center",
            textStyle: {
              fontSize: 12,
              fontWeight: "bold",
            },
            offset: [0, 3],
            formatter: ["{d|{d}%}", "{b|{b}}"].join("\n"),
            rich: {
              b: {
                lineHeight: 12,
                fontSize: 12,
                align: "left",
                color: color[index],
              },
              c: {
                fontSize: 12,
                textShadowColor: "#1c90a6",
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5,
                color: color[index],
              },
              d: {
                color: color[index],
                align: "left",
                fontSize: 12,
              },
            },
          },
        };
        item.labelLine = {
          normal: {
            length2: 30,
            lineStyle: {
              width: 1,
              color: color[index],
            },
          },
        };
      });
    },
    initChart5() {
      this.statusChart = echarts.init(this.$refs.chart);
      this.option = getPie3D(this.optionData, 0.9, 170, 30, 10, 1);
      this.statusChart.setOption(this.option);
      this.option.series.push({
        name: "风险分布",
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
          show: false,
        },
        startAngle: -40,
        clockwise: false,
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.statusChart.setOption(this.option);
      this.bindListen(this.statusChart);
    },
    bindListen(myChart, optionName = "option") {
      let selectedIndex = "";
      let hoveredIndex = "";

      myChart.on("mouseover", (params) => {
        // 移除悬浮动画效果，保持图形不变
        return;
      });
      myChart.on("globalout", () => {
        // 移除悬浮动画效果，保持图形不变
        return;
      });
    },
    // 自适应宽高
    changeSize() {
      this.statusChart.resize();
    },
  },
};
</script>
